/// <reference path="references.scss" />

//
// Container class of an image of which only a portion is displayed.
// The part of the image to be displayed is specified via "object-position".
// Used on blog post and news page.
// -------------------------------------------------

.cover-image-container {
    > img {
        object-fit: cover;
    }

    .horizontal-image {
        width: 100%;
        height: var(--cover-image-height, 300px);
        max-height: var(--cover-image-height, 300px);
    }
    /*  // Unused. For test or future use.  
    .vertical-image {
        max-width: 280px;
        height: 100%;
    }*/
}


//
// Brands
// -------------------------------------------------

.manufacturer-list-title {
    font-weight: bold;
    padding-bottom: 0.5rem;
}

.manufacturer-nav {
    border-bottom: 1px solid #ddd;
    margin-bottom: 2rem;

    .navbar {
        padding: 0;
        margin-bottom: .5rem;

        .nav-item {
            margin: 0 1rem;
        }

        .nav-link {
            font-size: 1.25rem;
            padding: 0;
        }
    }
}

//
// File Upload
// -------------------------------------------------

// overwrite for bluimp file upload control
/*.fu-fileupload .fu-progress.collapse {
    display: none !important; 
    width: 100%;
}
.fu-fileupload .fu-progress.collapse.show {
    display: block !important; 
}*/

//
// Customer avatar
// -------------------------------------------------
:is(.customer-avatar, .customer-avatar-lg) {
    display: inline-flex;

    .avatar-link {
        text-decoration: none;
        color: inherit;
    }

    :is(.avatar-outer, .avatar-img, .avatar-letter) {
        display: inline-block;
        border-radius: 50%;
        border: 0;
        width: 100%;
        height: 100%;
    }

    .avatar-letter {
        display: flex;
        justify-content: center;
        font-weight: bold;
    }

    .avatar-ring {
        border: 1px solid var(--border-color-translucent);
        outline: 3px solid #fff;
        outline-offset: -4px;
    }
}

.customer-avatar {
    width: 50px;
    height: 50px;

    .avatar-letter {
        font-size: $h2-font-size;
        line-height: 50px;
    }
}

.customer-avatar-lg {
    width: 120px;
    height: 120px;

    .avatar-letter {
        font-size: $display3-size;
    }
}

//
// MyAccount
// -------------------------------------------------
.recurring-payments-box {
    :is(td, th[scope=row]) {
        font-weight: normal;
        vertical-align: middle;
    }
}

.myaccount-header {
    .customer-avatar-lg {
        width: 64px;
        height: 64px;
        display: block;
    }

    .avatar-letter {
        font-size: 2.7rem;
    }
}

@include media-breakpoint-down(lg) {
    .myaccount-header {
        display: flex;
        flex-direction: column;
        text-align: center;
    }
}

@include media-breakpoint-down(sm) {
    .myaccount-header {
        flex-direction: initial;
        text-align: start;
    }
}

@include media-breakpoint-down(xs) {
    .myaccount-header .customer-avatar-lg {
        width: 55px;
        height: 55px;

        .avatar-letter {
            font-size: 2.4rem;
        }
    }
}


//
// Admin edit
// -------------------------------------------------

.admin-actions-container {
    position: relative;

    &:hover .admin-actions {
        opacity: 0.7;
    }

    &:focus-within .admin-actions {
        opacity: 1;
    }
}

.admin-actions {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: .375rem;
    position: absolute;
    inset-inline-end: .5rem;
    top: .5rem;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.1s;

    &:hover {
        opacity: 1 !important;
    }
}


// Masonry grid
.masonry-grid {
    display: grid;
    grid-gap: $list-group-item-padding-x;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    grid-auto-rows: 20px;
}

.btn-remove {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 4px;
    border-width: 0;
    background-color: transparent;

    &:hover {
        background-color: rgba($danger, .2);
    }

    > .fa {
        color: var(--danger);
        font-size: $h6-font-size;
        padding: 0;
    }
}


//
// Hacks
// -------------------------------------------------

.force-redraw:before {
    content: ""
}


//
// Other stuff
// -------------------------------------------------
#iframe-backinstocksubsription {
    max-width: 100%;
}